<!--
 * @Descripttion: 售后服务Dashboard
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-08 20:25:19
-->
<template>
  <div class="dashboard-container">
    <!-- 统计 -->
    <Statistic
      :loading="afterSaleDashboardParam.loading"
      :dataMap="afterSaleDashboardParam.dataMap.statistic"
    />
    <!-- 设备状态 -->
    <EquipState
      :loading="afterSaleDashboardParam.loading"
      :dataMap="afterSaleDashboardParam.dataMap.equipStateMap"
    />
    <!-- 设备保养计划 -->
    <UpKeepPlan
      upKeepType="equip"
      :loading="afterSaleDashboardParam.loading"
      :dataMap="afterSaleDashboardParam.dataMap.equipUpkeepPlan"
    />
    <!-- 模具状态 -->
    <MoldState
      :loading="afterSaleDashboardParam.loading"
      :dataMap="afterSaleDashboardParam.dataMap.moldStateMap"
    />
    <!-- 模具保养计划 -->
    <UpKeepPlan
      upKeepType="mold"
      :loading="afterSaleDashboardParam.loading"
      :dataMap="afterSaleDashboardParam.dataMap.moldUpkeepPlan"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import Statistic from "./afterSale-statistic/index.vue";
import EquipState from "./afterSale-equipState/index.vue";
import MoldState from "./afterSale-moldState/index.vue";
import UpKeepPlan from "./afterSale-upKeepPlan/index.vue";
import Dile_APi from "@/api";
/**
 * @Author: xzh
 * @Descripttion: 售服仪表单参数
 * @Param:
 */
let afterSaleDashboardParam = reactive<object_Inf>({
  loading: false,
  dataMap: {},
});
/**
 * @Author: xzh
 * @Descripttion: 初始渲染
 * @Param:
 */
onMounted(() => {
  init();
});
/**
 * @Author: xzh
 * @Descripttion: 初始化加载
 * @Param:
 */
let init = async () => {
  let { loading, dataMap } = toRefs(afterSaleDashboardParam);
  try {
    loading.value = true;
    //获取售服仪表盘数据
    let {
      statistic,
      equipAbnormal,
      equipFaultSpread,
      equipWarning,
      moldStateArr = [],
      moldFaultArr = [],
      moldWarningArr = [],
      equipUpkeepStatus = [],
      equipUkeepTask = {},
      equipUpkeepTaskStatus = [],
      mouldUpkeepStatus = [],
      mouldUkeepTask = {},
      mouldUpkeepTaskStatus = [],
    }: object_Inf = await Dile_APi.getAfterSaleDashboard();
    //数据源格式化分组
    dataMap.value = {
      //统计
      statistic,
      //设备状态
      equipStateMap: {
        equipAbnormal,
        equipFaultSpread,
        equipWarning,
      },
      //模具状态
      moldStateMap: {
        moldStateArr: moldStateArr,
        moldFaultArr: moldFaultArr,
        moldWarningArr: moldWarningArr,
      },
      //设备保养计划
      equipUpkeepPlan: {
        upkeepStatus: equipUpkeepStatus,
        ukeepTask: equipUkeepTask,
        upkeepTaskStatus: equipUpkeepTaskStatus,
      },
      //模具保养计划
      moldUpkeepPlan: {
        upkeepStatus: mouldUpkeepStatus,
        ukeepTask: mouldUkeepTask,
        upkeepTaskStatus: mouldUpkeepTaskStatus,
      },
    };
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  > div {
    display: flex;
    gap: var(--item-gap);
  }
  :deep(.el-card) {
    flex-direction: column;
    &:not(:is(.el-card-bottom-top)) {
      flex: 23rem 0 0;
    }
    .el-card__body {
      display: flex;
      height: 0;
      // gap: var(--item-gap);
      .el-col {
        height: 100%;
        padding-right: var(--item-gap);
      }
    }
  }
  --item-gap: 0.5rem;
}
</style>
